import React, { Component, } from 'react';
import { StyleSheet, Text, View, Clipboard, ScrollView, } from 'react-native';
import { POST, } from '../../commons/utils/request';
import { dealInAccountInfo, } from '../../app/constants/urls';
import Toast from '../../components/Toast';
import urls from '../../app/constants/urls';

const styles = StyleSheet.create({
  container:
  {
    flex: 1,
    backgroundColor: '#FFFFFF',
    padding: 15,
  },

  titleContainer:
  {
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: '#F6F6F6',
    marginBottom: 15,
    borderWidth: 1,
    borderColor: '#212121',
  },

  otherContainer: {
    borderColor: '#212121',
    borderWidth: 1,
  },
  boxContainer:
  {
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: '#F6F6F6',
  },

  titleText: {
    padding: 10,
    fontSize: 14,
    textAlign: "center",
    textAlignVertical: "center",
  },

  copyText: {
    padding: 10,
    textAlign: "center",
    color: '#FFFFFF',
    fontSize: 14,
    textAlignVertical: "center",
    backgroundColor: '#0091ff',
  },

  boxText: {
    textAlign: "center",
    textAlignVertical: "center",
    backgroundColor: '#F6F6F6',
    paddingTop: 5,
    paddingBottom: 5,
    fontSize: 14,
    flex: 2,
  },
  boxText2: {
    fontSize: 14,
    textAlign: "left",
    textAlignVertical: "center",
    backgroundColor: '#F6F6F6',
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 15,
    flex: 3,
  },
  bottomLine:{
    height: 1,
    backgroundColor: '#212121',
  },
  devideLine:{
    width: 1,
    backgroundColor: '#212121',
  },
  txtNotify: {
    textAlign: "center",
    color: '#FFFFFF',
    backgroundColor: '#0091ff',
    marginTop: 30,
    marginBottom: 10,
    paddingTop: 12,
    paddingBottom: 12,
    fontSize: 14,
    borderRadius: 6,
  },
});

export default class InWard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inwardData: {
        bankAbaNo: "",
        bankAddress: "",
        bankCard: "",
        bankName: "",
        bankSwiftNo: "",
        receiverAddress: "",
        receiverName: "",
        remark: "",
      },
    };
  }

  setClipboardText() {
    const data = this.state.inwardData;
    const d = JSON.stringify(data);
    Clipboard.setString(d);
    Toast.show({ title: "复制成功", });
  }

  getInfo() {
    const param = {
    };

    POST(urls.dealInAccountInfo, JSON.stringify(param)).then(resp => {
      console.log('TAGGG', `dealInAccountInfo====resp==${JSON.stringify(resp)}`);
      if (resp && resp.code === 0 && resp.data) {
        console.log('TAGGG', `dealInAccountInfo====resp==${JSON.stringify(resp)}`);
        this.state.inwardData = resp.data;
      } else {
        console.log('TAGGG', `dealInAccountInfo====resp==${JSON.stringify(resp)}`);
      }
    }, error => {
      console.log('TAGGG', `dealInAccountInfo====error==${JSON.stringify(error)}`);
    });
  }


  static navigationOptions = ({ navigation, }) => ({
    headerTitle: '汇入信息',
  });

  componentDidMount() {
    this.props.navigation.setParams({
      goBack: this.goBack,
    });
    this.getInfo();
  }

  goBack = () => {
    this.props.navigation.navigate('Home');
  };

  renderItem(key, value, bottomLine) {
    return (
      <View>
        <View style={styles.boxContainer}>
            <Text style={styles.boxText}>
              {key}
            </Text>
            <View style={styles.devideLine}></View>
            <Text style={styles.boxText2}>
              {value}
            </Text>
          </View>
          {bottomLine ? <View style={styles.bottomLine}></View> : <View/>}
      </View>
    )  
  }

  renderNotify() {
    return (
      <Text style={styles.txtNotify}  
        onPress={() => {
          this.notifySystem();
        }}
      >已汇款, 通知系统</Text>
    )
  }

  notifySystem() {
    const param = {
      bankCard: this.state.inwardData.bankCard,
    };
    console.log('TAGGG', '======invard==notifySystem=param=====' + JSON.stringify(param))
    this.props.navigation.navigate('Inform', param)
  }

  render() {
    const { navigation, } = this.props;
    return (
      <View style={styles.container}>
         <View style={styles.titleContainer}>
          <Text style={styles.titleText}>
            账号信息
          </Text>
          <Text style={styles.copyText}
            onPress={() => {
              this.setClipboardText();
            }}
          >
            一键复制
          </Text>
        </View>
        <ScrollView ref="ScrollView" showsVerticalScrollIndicator={false}>
          <View style={styles.otherContainer}>
            {this.renderItem(`收款人开户行名称Beneficiary's Bank Name:`, this.state.inwardData.bankName, true)}
            {this.renderItem(`收款人开户行地址Beneficiary's Bank Adress:`, this.state.inwardData.bankAddress, true)}
            {this.renderItem(`收款人开户行SWIFT号码Beneficiary's Bank SWIFT:`, this.state.inwardData.bankSwiftNo, true)}
            {this.renderItem(`收款人开户行ABA号Beneficiary's ANA:`, this.state.inwardData.bankAbaNo, true)}
            {this.renderItem(`收款人账号Beneficiary's Account Number:`, this.state.inwardData.bankCard, true)}
            {this.renderItem(`收款人明晨Beneficiary's Name:`, this.state.inwardData.receiverName, true)}
            {this.renderItem(`收款人地址Beneficiary's Address:`, this.state.inwardData.receiverAddress, true)}
            {this.renderItem(`汇款附言Remittance Infomation:`, this.state.inwardData.remark, false)}
          </View>
        </ScrollView>
        {this.renderNotify()}
      </View>
    );
  }
}
